<template>
	<view class="">
		<view class="wrapper flex">
			<view class="font-bold">
				单位转换比
			</view>
			<view class="flex-1 ml10 text-red">
				{{error?error:''}}
			</view>
			<view class="" v-if="!readonly">
				<u-icon name="plus-circle" color="#675f91" size="20" @click="add"></u-icon>
			</view>
		</view>
		<u-gap height="10"></u-gap>
		<view class="bgw" v-show="list.length>0">
			<view class="" v-if="readonly">
				<view v-for="(v,i) in list">
					<u-gap height="10"></u-gap>
					<view class="wrapper flex text-center">
						<view class="flex-1">
							1 {{unitsObj[v.unit_id]}}
						</view>
						<view class="ml15 mr15"></view>
						<view class="">
							=
						</view>
						<view class="ml15 mr15"></view>
						<view class="flex-1">
							{{value[i]}} {{unitsObj[main]}}
						</view>
					</view>
					<u-gap height="10"></u-gap>
					<u-line></u-line>
				</view>
			</view>
			<view class="" v-else>
				<u-gap height="10"></u-gap>
				<view class="wrapper flex font-24">
					<view class="flex-1">
						单位
					</view>
					<view class="ml15 mr15"></view>
					<view class="">
						=
					</view>
					<view class="ml15 mr15"></view>
					<view class="flex-1 text-right">
						比例
					</view>
					<view class="ml15 mr15"></view>
					<view class="flex-1">
						主单位
					</view>
					<view class="ml15 mr15"></view>
					<view class="" style="width: 60upx;">
				
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<u-line></u-line>
				<template v-for="(v,i) in list">
					<template v-if="main != v.unit_id">
						<u-gap height="10"></u-gap>
						<view class="wrapper flex">
							<view class="flex-1">
								
									<view class="flex-1">
										<picker @change="bindPicker" value="0" :range="units" range-key="label" :data-name="i"
											v-if="v.unit_id != purchase && v.unit_id != main">
											<view class="flex">
												<view class="text-light-gray input-text flex-1" v-if="!v.unit_id">
													请选择
												</view>
												<view class="input-text flex-1" v-else>
													1 {{unitsObj[v.unit_id]}}
												</view>
												<u-icon name="arrow-down"></u-icon>
											</view>
										</picker>
										<view class="input-text" v-else>
											1{{unitsObj[v.unit_id]}}
										</view>
									</view>
							</view>
							<view class="ml15 mr15"></view>
							<view class="">
								=
							</view>
							<view class="ml15 mr15"></view>
							<view class="flex-1 text-center">
									<input v-model="value[i]" border="none" placeholder="请填写" type="number" align="right" @blur="value_blur"
										:data-index="i" :maxlength="6" />
							</view>
							<view class="ml15 mr15"></view>
							<view class="flex-1">
								{{unitsObj[main]}}
							</view>
							<view class="ml15 mr15"></view>
							<view class="" style="width: 60upx;">
								<u-icon name="trash" color="#E40A0C" size="16" @click="bindDel(i)"
									v-show="v.unit_id != purchase"></u-icon>
							</view>
						</view>
						<u-gap height="10"></u-gap>
						<u-line></u-line>
					</template>
				</template>
			</view>

		</view>
		<u-gap height="20"></u-gap>
	</view>

</template>

<script>
	export default {
		name: "bom-unit-ratio",
		props: {
			main: Number,
			purchase: Number,
			units: Array,
			init: Array,
			readonly: Boolean
		},
		data() {
			return {
				list: [],
				unitsObj: {},
				error: '',
				delIds: [],
				value: []
			}
		},
		watch: {
			purchase(newVal, oldVal) {
				this.updataList(this.main, newVal);
			},
			main(newVal, oldVal) {
				// console.log('main');
				this.updataList(newVal, this.purchase);
			},
		},
		created() {
			this.initFn();
		},
		methods: {
			reset() {
				this.initFn();
			},
			initFn() {
				this.units.forEach(v => {
					this.unitsObj[v.id] = v.label;
				});
				console.log(this.init);
				this.list = [];
				this.delIds = [];
				if (this.init.length > 0) {
					this.init.forEach(v => {
						this.list.push({
							id: v.id,
							unit_id: v.unit_id[0],
							unit_ratio: v.unit_ratio
						})
						this.value.push(v.unit_ratio);
					})
				}
				this.updataList(this.main, this.purchase);
			},
			bindPicker(e) {
				let key = Number(e.currentTarget.dataset.name);
				let index = e.detail.value;
				// this.picker_value_obj[key] = index;
				let unit_id = this.units[index].id;
				if (unit_id == this.main) {
					uni.$u.toast('和主单位一致，不需要添加。');
					return;
				}
				let item = this.list.find(v => v.unit_id == unit_id);
				if (item) {
					uni.$u.toast('重复单位');
					return;
				}
				this.list[key].unit_id = unit_id;
				this.check();
			},
			updataList(main, purchase) {
				let i = this.list.findIndex(v => v.unit_id == purchase);
				let i2 = this.list.findIndex(v => v.unit_id == main);
				if (i2 != -1) {
					let item = this.list[i2];
					item.unit_ratio = 1;
					this.$set(this.list, i2, item);
					this.$set(this.value, i2, 1);
				}
				if (i == -1) {
					if (main != purchase) {
						this.list.push({
							unit_id: purchase,
							unit_ratio: '',
						});
						this.value.push('');
					}
				}
			},
			add() {
				this.list.push({
					unit_id: '',
					unit_ratio: ''
				});
			},
			bindDel(i) {
				if (this.list[i].id) {
					this.delIds.push(this.list[i].id);
				}
				this.list = this.list.filter((v, index) => index != i);
				this.check();
			},
			check() {
				let error = '';
				this.list.forEach(v => {
					if (error) {
						return;
					}
					if (!v.unit_id || !v.unit_ratio) {
						error = '请完善信息或删除。'
					}
					if (Number(v.unit_ratio) == 0 || Number(v.unit_ratio) < 0) {
						error = '比例不能输入负数。'
					}
				})
				this.error = error;
				return !error;
			},
			value_blur(e) {
				// console.log(e);
				let i = e.target.dataset.index;
				this.list[i].unit_ratio = this.formatPrice(Number(this.value[i]));
				this.check();
			},
			getList() {
				return {
					delIds: this.delIds,
					list: this.list
				};
			}

		}
	}
</script>


<style>
</style>